/*
 * @Description:
 * @Author: ldx
 * @Date: 2022-09-24 20:36:54
 * @LastEditors: ldx
 * @LastEditTime: 2022-09-24 20:58:44
 */
import { ShrinkOutlined } from '@ant-design/icons'
const Preview = ({ data, setVisible }: any) => {
  return (
    <div className="absolute w-100vw h-100vh left-0px top-0px bg-#fff p-20pxoverflow-hidden ">
      <div className="flex items-center border-b-1px border-#666">
        <div className="flex-1 items-center text-center text-32px">
          {data?.examName}
        </div>
        <ShrinkOutlined className="w-60px" onClick={() => setVisible(false)} />
      </div>

      <div className="overflow-auto" style={{ height: `calc(100vh - 80px)` }}>
        <div className="px-140px mt-10px ">
          <h2 className="">单选题</h2>
          <div>
            {(data?.singleChoiceExamItems || []).map(
              (singleChoice: any, index: number) => {
                return (
                  <div key={index} className="mb-16px">
                    <div className="text-16px">
                      <span className="mr-10px ">{index + 1}.</span>
                      <span>{singleChoice.itemName}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(A)</span>
                      <span>{singleChoice.itemOptionA}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(B)</span>
                      <span>{singleChoice.itemOptionB}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(C)</span>
                      <span>{singleChoice.itemOptionC}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(D)</span>
                      <span>{singleChoice.itemOptionD}</span>
                    </div>
                  </div>
                )
              }
            )}
          </div>
        </div>
        <div className="px-140px mt-10px ">
          <h2 className="">多选题</h2>
          <div>
            {(data?.multipleChoiceExamItems || []).map(
              (multipleChoice: any, index: number) => {
                return (
                  <div key={index} className="mb-16px">
                    <div className="text-16px">
                      <span className="mr-10px ">{index + 1}.</span>
                      <span>{multipleChoice.itemName}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(A)</span>
                      <span>{multipleChoice.itemOptionA}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(B)</span>
                      <span>{multipleChoice.itemOptionB}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(C)</span>
                      <span>{multipleChoice.itemOptionC}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(D)</span>
                      <span>{multipleChoice.itemOptionD}</span>
                    </div>
                  </div>
                )
              }
            )}
          </div>
        </div>
        <div className="px-140px mt-10px ">
          <h2 className="">判断题</h2>
          <div>
            {(data?.multipleChoiceExamItems || []).map(
              (multipleChoice: any, index: number) => {
                return (
                  <div key={index} className="mb-16px">
                    <div className="text-16px">
                      <span className="mr-10px ">{index + 1}.</span>
                      <span>{multipleChoice.itemName}</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(1)</span>
                      <span>对</span>
                    </div>
                    <div>
                      <span className="ml-20px mr-10px mb-6px">(2)</span>
                      <span>错</span>
                    </div>
                  </div>
                )
              }
            )}
          </div>
        </div>
        <div className="px-140px mt-10px ">
          <h2 className="">简答题</h2>
          <div>
            {(data?.shortAnswerExamItems || []).map(
              (shortAnswer: any, index: number) => {
                return (
                  <div key={index} className="mb-16px">
                    <div className="text-16px">
                      <span className="mr-10px ">{index + 1}.</span>
                      <span>{shortAnswer.itemName}</span>
                    </div>
                    <div className="h-60px">
                      <span className="ml-20px mr-10px mb-6px">(答)：</span>
                      <span></span>
                    </div>
                    {/* <div>
                      <span className="ml-20px mr-10px mb-6px">(2)</span>
                      <span>错</span>
                    </div> */}
                  </div>
                )
              }
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
export default Preview
